<template>
    <div className="error-page">
        <div className="show-err">
        <p className='page-404'>4&emsp;0&emsp;4</p>
        <div className="pic">
            <img :src="getImageUrl('../../assets/404.png')" alt="" />
        </div>

        <h3>SORRY, 你访问的页面不存在.</h3>

        <p className="tips">页面将在<em>{{ count }}</em>秒内自动跳转至首页</p>

        <p>
            <a href="javascript:;" @click="linkToHome">手动返回首页</a>
        </p>
        </div>
    </div>
</template>


<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

// ** 动态获取本地资源图片
const getImageUrl = name => new URL(name, import.meta.url).href

 let count = ref(5)
 let timer = null
 const router = useRouter()

 const linkToHome = () => {
     clearInterval(timer)
     router.push('/')
 }

 // 自动跳转返回首页
 const interval = () => count.value > 0 ? --count.value : linkToHome()

 // 初始化加载定时器
 onMounted(() => {
     clearInterval(timer)
     timer = setInterval(interval, 1000)
 })

</script>


<style lang="less" scoped>

// 错误处理页面
.error-page {
    height: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;

    .show-err {
        width: 480px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .page-404 {
            font-size: 80px;
            color: rgba(255, 255, 255, .6);
            font-family: consolas, Arail;
            text-align: center;
            margin-bottom: 20px;

            text-shadow: 
                4px 4px 2px #050505,
                -2px -2px 0 rgb(75, 75, 75);

            opacity: .65;
        }

        .pic {
            width: 30%;
            margin-bottom: 40px;
            img {
                width: 100%;
                transform: scaleY(0.9);
            }
        }

        .tips {
            font-size: 12px;
            margin: 30px 0;
            padding: 30px;
            letter-spacing: 10px;
            color: #ddd;

            border-top: 1px dashed #ddd;

            em {
                color: #188ffe;
            }
        }

        h3 {
            color: #666;
            letter-spacing: 5px;
            text-align: center;
            text-indent: 5px;
            font-weight: normal;
        }

        a {
            text-decoration: none;
            color: #666;
        }
    }
}
</style>